<template>

	<view class="particulars">
		<custom-navbar :title="pageTitle" :statusBarHeight="statusBarHeight" :navBarHeight="navBarHeight"
			:windowWidth="windowWidth" :color="color" :backgroundColor="backgroundColor"></custom-navbar>
		<swiperVidio :videoSrc="shopQuery.video" :image_list="shopQuery.image_list"
			:videoShow="shopQuery.video?true:false"></swiperVidio>
		<!-- <u-swiper :list="shopQuery.image_list" height="550" mode="number" indicator-pos="bottomRight"></u-swiper> -->
		<view class="main_box">
			<view class="header">
				<view class="shop_name">
					<image :src="shopQuery.category_image" mode="" class="darg" v-if="shopQuery.category_image"></image>
					<view class="name">
						{{shopQuery.name}}
					</view>
				</view>
				<view class="business_hours">
					<view class="business">
						{{shopQuery.manage_str}}
					</view>

					<view class="hours">
						{{shopQuery.manage_time}}
					</view>

					<view class="size">
						{{shopQuery.label}}
					</view>
				</view>
			</view>
			<view class="row_box">
				<view v-for="(item,index) in baseList" :key="index" class="base_item" @click="openPopup(item, index)">
					<view class="number">
						{{item.num}}
					</view>
					<view class="text">
						<text>{{item.text}}</text>
						<image :src="$IMG_URL('/static/coach/open.png')" mode="" class="open"
							v-if="index === 2 || index === 3">
						</image>
					</view>
				</view>
			</view>
			<view class="comlum_box">
				<view class="address">
					<view class="deatil" @click="routeMapnavgation">
						<view class="size">
							{{shopQuery.address}}
						</view>
						<view class="distance">
							<image :src="$IMG_URL('/static/home/navigation.png')" mode="" class="navigation"></image>
							<view class="size1">
								{{shopQuery.distance}}
							</view>
						</view>
					</view>
					<view class="button" @click="routeGuide">
						到店指引
					</view>
				</view>
				<u-swiper class="swiper" interval="5000" :list="activity_list" name="image" height="210"
					:background="background" mode="rect" indicator-pos="bottomCenter" v-if="activity_list.length"
					@click="routeSwiper"></u-swiper>
				<!-- 618 -->
				<activitBox :query="preheat_info" v-if="JSON.stringify(preheat_info) != '{}'" ></activitBox>
				<view class="" style="margin-bottom: 24rpx;">
					
				</view>
				<!-- VIP会员 -->
				<view class="content_box">
					<view class="content_hearder">
						<view class="left">
							VIP会员
						</view>
						<view class="right" @click="routeSingle">
							<view class="size">
								{{vip_str}}
							</view>
							<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="indicate"
								v-if="!is_single"></image>
						</view>
					</view>
					<view class="center_box center_darg">
						<MemberList v-if="member_List.length" :memberList="member_List" :is_share="query.is_share"></MemberList>
						<noCentent :content="'会员卡正在赶来的路上~'" v-else></noCentent>
					</view>
				</view>
				<!-- 推荐教练 -->
				<view class="content_box">
					<view class="content_hearder">
						<view class="left">
							推荐教练
						</view>
						<view class="right" @click="$ROUTELINK('coach/list?shop_id=' + query.shop_id)">
							<view class="size">
								全部教练
							</view>
							<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="indicate"></image>
						</view>
					</view>
					<view class="center_box center_darg1">
						<coach v-if="coach_List.length" :coachList="coach_List"></coach>
						<noCentent :content="'教练正在赶来的路上~'" v-else></noCentent>
					</view>
				</view>

				<!-- 推荐课程 -->
				<view class="content_box">
					<view class="content_hearder">
						<view class="left">
							推荐课程
						</view>

					</view>
					<view class="center_box center_darg1">
						<course v-if="course_List.length" :courseList="course_List"></course>
						<noCentent :content="'课程正在赶来的路上~'" v-else></noCentent>
					</view>
				</view>
				<!-- 空 -->
				<view class="empty">

				</view>
			</view>

			<view class="foot">
				<view class="btn1" @click="openCall">
					拨打电话
				</view>
				<view class="btn2" @click="openWeChatCode">
					联系店长
				</view>
			</view>
			<!-- 弹窗 -->
			<!-- <Loading v-if="loading" :logo="$IMG_URL('/static/user/login.png')" backgroundColor="#ffffff" color="#4ECDC4" :speed="1000"
				:bounceHeight="50" text="数据加载中" /> -->
			<popup :popupShow="popupShow" :popTitle="poptitle" :popList="popupList" @openOff="offPopup"></popup>
			<telephone :telephoneShow="telephoneShow" :telephone="buinour_info.mobile" @cancel="callCancel"
				@sure="callSure"></telephone>
			<WechatCode :WechatCodeShow="WechatCodeShow" :code="buinour_info.wechat_mark" @sure="weChatSure"
				:title="'添加店长微信'" :content="'长按识别二维码'" :btn="'保存二维码'" @save="saveImg"></WechatCode>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/components/navbar/navbar.vue';
	import noCentent from '@/pages/index/components/no_content.vue'
	import MemberList from '@/pages/index/components/member_list.vue'
	import course from '@/pages/index/components/course.vue'
	import coach from '@/pages/index/components/coach_list.vue'
	import popup from './components/pop-up.vue'
	import telephone from './components/telephone.vue'
	import WechatCode from './components/WechatCode.vue'
	import swiperVidio from '@/components/swiperVideo.vue'
	import activitBox from '@/components/activities.vue'
	import {
		deatil
	} from '@/api/shop.js'
	export default {
		components: {
			CustomNavbar,
			noCentent,
			MemberList,
			course,
			coach,
			popup,
			telephone,
			WechatCode,
			swiperVidio,
			activitBox
		},
		data() {
			return {
				is_single: 0,
				// 微信二维码痰喘
				WechatCodeShow: false,
				// 电话弹窗
				telephoneShow: false,
				// 自定义弹窗组件
				popupShow: false,
				poptitle: '',
				popupList: [],
				// popupHeight:0,
				// 自定义导航栏
				color: '#ffffff',
				backgroundColor: 'transparent',
				pageTitle: '门店详情',
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				shopQuery: {},
				// 基础设施
				baseList: [{
						num: '',
						text: '门店面积/㎡'
					},
					{
						num: '',
						text: '私教面积/㎡'
					},
					{
						num: '',
						text: '基础服务',
						list: []
					},
					{
						num: '',
						text: '器械设施',
						list: []
					}
				],
				// VIP会员
				vip_str: '',
				member_List: [],
				// 教练列表
				coach_List: [],
				// 课程列表
				course_List: [],
				activity_list: [],
				query: {},
				buinour_info: {},
				loading: false,
				preheat_info:{},
				popout_info:{}
			}
		},
		computed: {},
		onPageScroll(e) {
			console.log(e.scrollTop);
			if (e.scrollTop >= 100 || this.loading == true) {
				this.backgroundColor = '#ffffff',
					this.color = '#000000'
			} else {
				this.backgroundColor = 'transparent',
					this.color = '#ffffff'
			}
		},
		onLoad(e) {
			console.log('e', e);
			this.query = e
			// uni.$emit('SHOPID', this.query)
		},
		onShow() {
			let that = this
			uni.$on('SHOPID', function(data) {
				console.log("SHOPID", data);
				that.query = data
				that.query.is_share = 1
			})
			this.getdeatil(this.query)
		},
		methods: {
			routeSwiper(e) {
				const {
					form,
					param
				} = this.activity_list[e]
				console.log('e', form);
				if (form == 'exp') {
					this.$ROUTELINK('/pageA/course/detail?course=' + param)
				} else if (form == 'join') {
					this.$ROUTELINK('/pageB/activity/join/index')
				} else {
					this.$ROUTELINK('/pageB/activity/deatil?form=' + form + '&param=' + param)
				}

			},
			routeSingle() {
				if (!this.is_single) {
					console.log('单店通用卡');
					uni.navigateTo({
						url: '/pageA/shop/select'
					})
				} else {
					uni.showToast({
						title: this.vip_str,
						icon: 'none'
					})
				}
			},
			getdeatil() {
				this.loading = true
				this.backgroundColor = '#ffffff',
				this.color = '#000000'
				deatil(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.loading = false
						this.backgroundColor = 'transparent',
						this.color = '#ffffff'
						const shopInfo = res.data.shop_info
						this.shopQuery = shopInfo
						this.popout_info = res.data.popout_info
						this.preheat_info = res.data.preheat_info
						this.baseList[0].num = shopInfo.acreage
						this.baseList[1].num = shopInfo.per_acreage
						this.baseList[2].num = shopInfo.serve
						this.baseList[2].list = shopInfo.serve_list
						this.baseList[3].num = shopInfo.instr
						this.baseList[3].list = shopInfo.instr_list
						this.activity_list = res.data.activity_list
						this.course_List = res.data.course_list
						this.member_List = res.data.vip_list
						this.vip_str = res.data.vip_str
						this.coach_List = res.data.coach_list
						this.is_single = res.data.is_single
						this.buinour_info = res.data.buinour_info
						this.$u.mpShare = {
							title: this.shopQuery.name, // 默认为小程序名称，可自定义
							path: '/pageA/shop/particulars?shop_id=' + this.query
								.shop_id + '&is_share=' + 1, // 默认为当前页面路径，一般无需修改，QQ小程序不支持
							imageUrl: this.shopQuery.image_list[0],
						}

					}
				}).finally(() => {
					// this.$CHECKTOKEN().then(isValid => {
					// 	if (isValid) {
					// 		console.log('Token is valid', isValid);
					// 		this.tokenShow = true
					// 	} else {
					// 		this.chekLogin_storid()
					// 		console.log('Token is invalid or not found', isValid);
					// 	}
					// }).catch(error => {
					// 	this.chekLogin_storid()
					// 	console.error('Error checking token:', error);
					// });
				})
			},
			chekLogin_storid() {
				const obj = {
					code: 401,
					msg: '您尚未登录，是否立即登录？'
				}
				this.tokenShow = false
				uni.setStorageSync('SHOPID', this.query)
				this.$SHOWMODALMSG('登录提示', obj)
			},
			routeMapnavgation() {
				let that = this
				uni.openLocation({
					latitude: Number(that.shopQuery.lat), //要去的纬度-地址
					longitude: Number(that.shopQuery.long), //要去的经度-地址
					address: that.shopQuery.address, //要去的具体地址

				})
			},
			routeGuide() {
				uni.navigateTo({
					url: 'Arrival-guide?shop_id=' + this.query.shop_id
				})
			},
			// 微信弹窗
			openWeChatCode() {
				this.WechatCodeShow = true
			},
			weChatSure() {
				this.WechatCodeShow = false
			},
			saveImg() {
				this.$SAVERIMG(this.buinour_info.wechat_mark)
				this.WechatCodeShow = false
			},
			// 电话弹窗
			openCall() {
				this.telephoneShow = true
			},
			callSure() {
				this.telephoneShow = false
			},
			callCancel() {
				this.telephoneShow = false
			},
			offPopup(message) {
				this.popupShow = false
			},
			openPopup(item, index) {
				if (item.list.length) {
					this.poptitle = item.text
					this.popupList = item.list
					this.popupShow = true
				}
			}
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo);
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.particulars {
		display: flex;
		flex-direction: column;

		.main_box {
			width: 750rpx;
			margin-top: -22rpx;
			background: #e9e9e9;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			z-index: 10;
			// padding: 0 24rpx;

			.header {
				width: 100%;
				height: 156rpx;
				padding: 40rpx 40rpx 0;
				display: flex;
				flex-direction: column;
				background: linear-gradient(180deg, #ffffff, #e9e9e9);

				.shop_name {
					display: flex;
					flex-direction: row;
					align-items: center;

					.darg {
						width: 114rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}

					.name {
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
					}
				}

				.business_hours {
					margin-top: 4rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.business {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #73F0EA;
						margin-right: 16rpx;
					}

					.hours {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;
						margin-right: 12rpx;
					}

					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
					}
				}

			}

			.row_box {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				margin-bottom: 24rpx;
				padding: 0 24rpx;

				.base_item {
					width: 168rpx;
					height: 130rpx;
					background: #ffffff;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.number {
						margin-top: 20rpx;
						font-size: 40rpx;
						font-family: DIN, DIN-Bold;
						font-weight: 700;
						text-align: center;
						color: #333333;
					}

					.text {
						margin-top: 10rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: center;
						color: #999999;

						.open {
							width: 10rpx;
							height: 16rpx;
							margin-left: 5rpx;
						}
					}
				}
			}

			.comlum_box {
				display: flex;
				flex-direction: column;
				padding: 0 24rpx;
				align-items: center;
			}

			.address {
				width: 100%;
				height: 162rpx;
				background: #ffffff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 24rpx;
				padding: 20rpx 24rpx;

				.deatil {
					display: flex;
					flex-direction: column;
					flex: 1;

					.size {
						width: 494rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.distance {
						display: flex;
						flex-direction: row;
						align-items: center;

						.navigation {
							width: 22rpx;
							height: 22rpx;
							margin-right: 3rpx;
						}

						.size1 {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #73F0EA;
						}
					}
				}

				.button {
					width: 128rpx;
					height: 58rpx;
					border: 2rpx solid #73F0EA;
					border-radius: 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #73F0EA;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.swiper {
				width: 100%;
				margin-bottom: 24rpx;
			}

			.content_box {
				width: 100%;
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 16rpx 0;

				.content_hearder {
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					padding: 0 24rpx;

					.left {
						flex: 1;
						font-size: 32rpx;
						font-weight: 800;
						color: #333333;
					}

					.right {
						display: flex;
						flex-direction: row;
						align-items: center;

						.size {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: right;
							color: #999999;
						}

						.indicate {
							width: 10rpx;
							height: 16rpx;
							margin-left: 6rpx;
						}
					}
				}

				.center_box {
					// padding: 35rpx  0 35rpx 24rpx ;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			.empty {
				width: 100%;
				height: 184rpx;
			}

			.foot {
				z-index: 999;
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 160rpx;
				background: #ffffff;
				box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
				display: flex;
				justify-content: center;
				justify-content: space-around;
				padding-top: 16rpx;

				.btn1 {
					transform: rotateZ(360deg);
					width: 346rpx;
					height: 88rpx;
					border: 1rpx solid #73F0EA;
					border-radius: 16rpx;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #73F0EA;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.btn2 {
					width: 346rpx;
					height: 88rpx;
					background: #73F0EA;
					border-radius: 16rpx;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.center_darg {
		padding: 35rpx 24rpx;
	}

	.center_darg1 {
		padding: 35rpx 0 35rpx 24rpx;
	}
</style>